<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="./css/mui.min.css">
		<style>
			body, .mui-content {
				background-color: #333;
				color: #fff;
			}
			header.mui-bar{
				display: none;
			}
			.mui-bar-nav~.mui-content{
				padding: 0;
			}
			 .title{
			  	margin: 35px 15px 10px;
			  }
			  .title+.content{
			  	margin: 10px 15px 35px;
			  	color: #bbb;
			  	text-indent: 1em;
			  	font-size: 14px;
			  	line-height: 24px;
			  }
			  .mui-table-view{
			  	margin-bottom: 35px;
			  }
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div class="title">欢迎回来</div>
				<div class="content">
					<p style="margin: 10px 15px;">
						<button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">签到</button>
					</p>
					
				</div>
				<div class="title" style="margin-bottom: 25px;">放松一下吧</div>
				<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="./news/news.html">
							新闻
						</a>
						<a class="mui-navigate-right" href="./blogs/blogs.html">
							博客
						</a>
						<a class="mui-navigate-right" href="./videos/videos.html">
							视频
						</a>
					</li>
				</ul>
		</div>
		<script src="./js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				keyEventBind: {
					backbutton: false,
					menubutton: false
				}
			});
			//获得侧滑主窗口webview对象
			var main = null;
			mui.plusReady(function () {
				main = plus.webview.currentWebview().opener();
			})
			function closeMenu () {
				mui.fire(main,"menu:swipeleft");
			}
			//优化显示出来的侧滑菜单，只需监听该菜单的左滑事件，然后将其关闭即可；在菜单上右滑，不做任何操作；
			window.addEventListener("swipeleft",closeMenu);  
			document.getElementById("close-btn").addEventListener('tap',closeMenu);
			mui.menu = closeMenu;
			
			mui('body').on('tap','a',function(e) {
		    	//获取当前点击的url
			     var myUrl = this.href;
				//首先隐藏侧滑菜单
				//获取打开的所有webview页面                     
			   	var wvs = plus.webview.all();
				//console.log(wvs);
				for (var i = 0, len = wvs.length; i < len; i++) {
					//隐藏所有的页面
			        plus.webview.hide(wvs[i])
				}
				mui.openWindow({  
			        url:myUrl,
			  	});
			});
		</script>
</body>

</html>